<template>
    <div class="input-box">
        <div class="tool">
            <!-- 表情弹出框 -->
            <el-popover placement="top-start" width="400" trigger="click" v-model="isShowEmoji">
                <div class="emoji-list scroll-bar-v">
                    <div class="emoji" @click="selectEmoji(item)"  v-for="item in emojiData" :key="item.codes">
                        {{item.char}}
                    </div>
                </div>
                <i slot="reference" class="tool-item icon iconfont icon-xiaolian"></i>
            </el-popover>
            <!-- 选择图片 -->
            <el-upload class="tool-item upload" action="#" accept="image/*"
                :show-file-list="false" :http-request="selectImage">
                <i class="icon iconfont icon-tupian"></i>
            </el-upload>
            <!-- 录音组件 -->
            <div class="tool-item">
                <record-sound-com @onSendAudio="selectAudio" />
            </div>
            <!-- 选择其他文件 -->
            <el-upload class="tool-item upload" action="#" accept="*/*"
                :show-file-list="false" :http-request="selectFile">
                <i class="icon el-icon-folder-opened"></i>
            </el-upload>
        </div>
        <div class="input">
            <textarea ref="input" class="area" type="text" v-model="chatContent" @keydown="onKeyDown"/>
            <el-button type="primary" size="small" class="send-btn"
                @click="sendMessage(0,chatContent)">
                发送(Alt+Enter)
            </el-button>
        </div>
    </div>
</template>
<script lang="ts">
import {Vue,Component} from 'vue-property-decorator'
import {MsgType} from '../conf'
import RecordSoundCom from './RecordSoundCom.vue'

@Component({
    components:{
        RecordSoundCom
    }
})
export default class ChatInputBox extends Vue{

    // 表情数据
    public emojiData = require('../assets/emoji.json')

     // 聊天内容
    public chatContent:string = ''

    // 是否显示表情
    public isShowEmoji:boolean = false

    // 监听组合键 alt + enter 发送文本消息
    public onKeyDown(e:KeyboardEvent){
        if( e.altKey && (e.key === 'Enter')){
            e.returnValue = false
            e.preventDefault()
            this.sendMessage(MsgType.MSG_TYPE_TEXT, this.chatContent)
        }
    }

    // 选择emoji
    public selectEmoji(item:any){
        this.isShowEmoji = false
        this.insertTextToInputBox(item.char)
    }

    // 在指定光标处插入数据
    insertTextToInputBox (text:string) {
      const elInput = this.$refs.input as any;
      let startPos = elInput.selectionStart
      const sourceStr = this.chatContent
      const newStr = sourceStr.substring(0,startPos) + text + sourceStr.substring(startPos)
      this.chatContent = newStr
    }

    // 选择图片消息
    public selectImage(e:any){
        this.sendMessage(MsgType.MSG_TYPE_PIC, e.file)
    }

    // 选择音频消息
    public selectAudio(blog:Blob){
        const filename = new Date().getTime() + '.webm'
        const file = new File([blog], filename, {type: 'audio/webm'})
        this.sendMessage(MsgType.MSG_TYPE_SOUND, file)
    }

    // 选择其他文件消息
    public selectFile(e:any){
        this.sendMessage(MsgType.MSG_TYPE_FILE, e.file)
    }

   // 发送消息
    public sendMessage(type:number, content:string | File){
        if(type == MsgType.MSG_TYPE_TEXT){
            if((content as string).match(/^\s*$/) != null){
                this.$message.warning('发送的消息不能为空串或全空白字符!')
                 return;
            }
        }
        this.$emit('onMsg',type, content)
        this.chatContent = ''
    }
    
}
</script>

<style lang="less" scoped>
@import '../css/iconfont.less';
@import '../css/index.less';

.input-box{
    height: 140px;
    border-top: 1px solid #efefef;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    .tool{
        display: flex;
        .icon{
            font-size: 16px;
        }
        .tool-item{
            cursor: pointer;
        }
        .tool-item:not(:first-child){
            margin-left: 10px;
        }
    }
    .input{
        margin-top: 10px;
        flex: 1;
        position: relative;
        .area{
            background-color: white;
            border-width: 0px;
            height: 100%;
            width: 100%;
            outline: none;
            resize: none;
            font-family:"Times New Roman", Times, serif;
            &:focus{
                outline: none;
            }
        }
        .send-btn{
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
}
.emoji-list{
    width:100%;
    height: 300px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
    .emoji{
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>